import React, { useState } from 'react'
import { useVirtualRoomStore } from '../store'
import shallow from 'zustand/shallow'
import { StyledWrap } from './style'
import { Button, Tab } from '@kedacom/react-next'
import BasicInfo from './BasicInfo'
import MtParams from './MtParams'
import ExclusiveInfo from './ExclusiveInfo'
import VisibleInfo from './VisibleInfo'
import { t } from 'i18next'

const tabData = [
	{
		label: t('基本信息'),
		value: 1,
	},
	{
		label: t('会议参数'),
		value: 2,
	},
	{
		label: t('专属信息'),
		value: 3,
	},
	{
		label: t('可见性设置'),
		value: 4,
	},
]
export default function VirtualRoomEdit() {
	const [tab, setTab] = useState(1)
	const { saveData, reset } = useVirtualRoomStore(
		(state) => ({
			saveData: state.saveData,
			reset: state.reset,
		}),
		shallow
	)

	return (
		<StyledWrap>
			<div className="top">
				<Tab
					type="button"
					data={tabData}
					value={tab}
					onChange={(e, v) => {
						setTab(v)
					}}
				></Tab>
				<div className="btns">
					<Button className="btn" onClick={saveData}>
						{t('保存')}
					</Button>
					<Button onClick={() => reset()}>{t('取消')}</Button>
				</div>
			</div>
			{tab === 1 && <BasicInfo />}
			{tab === 2 && <MtParams />}
			{tab === 3 && <ExclusiveInfo />}
			{tab === 4 && <VisibleInfo />}
		</StyledWrap>
	)
}
